selectTab();
function selectTab() {
  // 1.获取所有的按钮 tabs-header-item
  const tabsHeaderItems = document.querySelectorAll(".tabs .tabs-header-item");
  // 2.获取所有的内容 tabs-content-item
  const tabsContentItems = document.querySelectorAll(
    ".tabs .tabs-content-item"
  );
  // console.log(tabsContentItems);
  // 3.遍历所有的按钮
  for (let i = 0; i < tabsHeaderItems.length; i++) {
    const item = tabsHeaderItems[i];
    item.addEventListener("click", () => {
      // 4.删除所有按钮的active类名
      tabsHeaderItems.forEach((item) => {
        item.classList.remove("active");
      });
      // 5.为当前按钮添加active类名
      item.classList.add("active");

      // 隐藏当前被激活这一项 tabs-content-item
      tabsContentItems.forEach((item) => {
        item.style.display = "none";
      });
      // 6.显示当前被激活这一项 tabs-content-item
      tabsContentItems[i].style.display = "block";
    });
  }
}
